<div>
	<div class="table" ng-controller="StudentSportsEditableGrid">
		<div class="panel panel-primary">
			<!-- Default panel contents -->
			<!-- <div class="panel-heading">Search</div> -->
			<div class="panel-body">
			<form novalidate class="simple-form">
				<table class="table table-condensed">
					<tr>
						<td width="5%">Grade</td>
						<td width="10%"><select class="form-control input-sm" ng-model="searchCriteria.gradeId" ng-change="criteriaChanged()" ng-options="c.id as c.value for c in gradeList"></select></td>
						<td width="5%"></td>
						<td><button type="button" class="btn btn-success btn-sm" ng-click="getDetails()">Get Details</button></td>
					</tr>
				</table>
			</form>
			</div>
		</div>
		<div class="panel panel-primary" ng-show="showGrid">
		<!-- Button trigger modal -->
			<!-- Default panel contents -->
			<div class="panel-heading">Student Sports Details</div>
			<div class="panel-body">
				<table class="table">
					<tr>
						<td colspan="8">
							<div class="table">
								<div>
									<form editable-form name="sportsForm" onaftersave="saveTable()"
										oncancel="cancel()">
										<!-- table -->
										<table
											class="table table-bordered table-hover table-condensed">
											<tr style="font-weight: bold; background-color: #f4f4f4;">
												<td style="width: 15%">Event</td>
												<td style="width: 15%">Competition Level</td>
												<td style="width: 15%">Date</td>
												<td style="width: 10%">Rank</td>
												<td style="width: 15%">Medal</td>
												<td style="width: 5%">Weightage</td>
												<td style="width: 15%">Remarks</td>
												<td style="width: 30%">Upload Certificate</td>
												<td style="width: 10%"><span
													ng-show="sportsForm.$visible">Action</span></td>
											</tr>
											<tr ng-repeat="sportsVo in sportsVos | filter:filterSports">
												<td>
													<!-- editable username (text with validation) --> <span
													editable-select="sportsVo.sportId" e-form="sportsForm"
													e-ng-options="s.id as s.sportName for s in sportsList"
													>{{showSports(sportsVo)}}</span>
												</td> 
												<td>
													<!-- editable username (text with validation) --> <span
													editable-select="sportsVo.competitionLevel" e-form="sportsForm"
													e-ng-options="s.id as s.value for s in competitionLevelList"
													>{{showSportsCompetitionLevel(sportsVo)}}</span>
												</td> 
												<td>
												<span editable-bsdate="sportsVo.dated" e-datepicker-popup="dd-MMMM-yyyy" e-form="sportsForm">
            									{{ (sportsVo.dated | date:"dd/MM/yyyy") || 'empty' }}
          										</span></td>
          										<td> 
												<span editable-text="sportsVo.ranking" e-form="sportsForm">
            									{{ sportsVo.ranking || 'Not Specified' }}
          										</span></td>
          										<td>
												<span editable-select="sportsVo.medal" e-form="sportsForm" e-ng-options="s.id as s.value for s in medalsList">
            									{{ sportsVo.medal || 'Not Specified' }}
          										</span></td>
          										<td>
          										<span editable-text="sportsVo.attributeWeightage" e-form="sportsForm">
            									{{ sportsVo.attributeWeightage || '' }}
          										</span></td>
          										<td>
          										<span editable-textarea="sportsVo.remarks" e-form="sportsForm">
            									{{ sportsVo.remarks || '' }}
          										</span></td>
          										<td><span><a ng-show="sportsVo.sportsAttachmentId>0" target="_self" ng-href="/mc-mvc/admin/handleRequest/filedownload/{{sportsVo.sportsAttachmentId}}">
													<button class="btn btn-success btn-sm" type="button">Download</button>
												</a><a ng-show="sportsForm.$visible" data-toggle="modal" data-target="#myModal" class="btn btn-sm btn-success" ng-click="initFileParams(searchCriteria,{recordType:'SPORTS'},handleAttachImage,sportsVo)">Attach Cert</a>
													</span>
												</td>
												<td><button type="button" ng-show="sportsForm.$visible"	ng-click="deleteSportsRow(sportsVo.cid, sportsVo.sid)"
														class="btn btn-danger pull-right">Del</button></td>
											</tr>
										</table>
										<!-- buttons -->
										<div class="btn-edit">
											<button type="button" class="btn btn-default"
												ng-show="!sportsForm.$visible" ng-click="sportsForm.$show()">
												edit</button>
										</div>
										<div class="btn-form" ng-show="sportsForm.$visible">
											<button type="button" ng-disabled="sportsForm.$waiting"
												ng-click="addSportsRow()" class="btn btn-default pull-right">add
												row</button>
											<button type="submit" ng-disabled="sportsForm.$waiting"
												class="btn btn-primary">save</button>
											<button type="button" ng-disabled="sportsForm.$waiting"
												ng-click="sportsForm.$cancel()" class="btn btn-default">cancel</button>
										</div>
									</form>
								</div>
							</div>
						</td>
					</tr>
				</table>
				<div class="panel  panel-default">
					<div class="panel-heading">
						Recommendations
						<button data-toggle="modal" data-target="#recommendationModule" class="btn btn-sm btn-success pull-right" ng-click="initRecommendations(searchCriteria)">Add recommendations</button>
					</div>
					<div class="Panel-body">
						<div style="font-size: 12px">
							<div ng-show="showRecommendation==true">
								<p class="message " ng-repeat="row in recommendations">
									<a class="name" href="#" data-toggle="modal" data-target="#recommendationModule" ng-click="initRecommendations(searchCriteria,row)">{{row.recommendationtitle || 'No Title'}}</a><br> <span ng-attr-id="{{ 'rdiv-' + $index }}">{{row.recommendationText || 'No Text'}}</span>
								</p>
							</div>
							<div class="row" ng-show="showRecommendation==false">No Recommendations Added</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>